<template>
  <el-menu-item :index="indexString">
    <template slot="title">
      <i class="el-icon-db-table"></i>
      <span slot="title" class="table-name">{{table.name}}</span>
      <el-checkbox v-model="checked"/>
    </template>
  </el-menu-item>
</template>

<script>
  export default {
    props: ["table", "index", "parentIndex"],
    name: "Table",
    data() {
      return {
        indexString: this.parentIndex + "-" + (this.index + 1)
      }
    }, computed: {
      checked: {
        get() {
          return this.table.checked;
        }, set(flag) {
          this.table.checked = flag;
        }
      }
    }
  }
</script>

<style scoped>
  .el-checkbox {
    float: right;
    margin-right: -10px;
  }

  .table-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 80%;
  }
</style>
